<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened }">
    <div class="default-header">
        <div class="row">
            <h1 class="col">TraceNG device configuration</h1>
        </div>
    </div>
    <div class="default-content" *ngIf="tracengTemplate">
        <mat-card class="matCard">
            <form [formGroup]="inputForm">
                <mat-form-field class="form-field">
                    <input 
                        matInput type="text" 
                        [(ngModel)]="tracengTemplate.name" 
                        formControlName="templateName"
                        placeholder="Template name">
                </mat-form-field>
                <mat-form-field class="form-field">
                    <input 
                        matInput type="text" 
                        [(ngModel)]="tracengTemplate.default_name_format" 
                        formControlName="defaultName"
                        placeholder="Default name format">
                </mat-form-field>
                <mat-form-field class="form-field">
                    <input 
                        matInput type="text" 
                        [(ngModel)]="tracengTemplate.symbol" 
                        formControlName="symbol"
                        placeholder="Symbol">
                </mat-form-field>
                <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
            </form>
        </mat-card>
        <div class="buttons-bar">
            <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
            <button mat-raised-button color="primary" (click)="onSave()">Save</button>
        </div>
    </div>
</div>
<app-symbols-menu *ngIf="isSymbolSelectionOpened && tracengTemplate" [server]="server" [symbol]="tracengTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>
